
#canvas {
opacity: 0.5;
font-size: 24px;
width:  800px;
height: 500px;
position: absolute; top: 0px; left: 0px;

background: -webkit-gradient(
  radial, 300 50%, 20, 100 25%, 40, from(red), 
  color-stop(0.05, orange), color-stop(0.4, yellow), 
  color-stop(0.6, green), color-stop(0.9, blue),
  to(#fff)
 );

background-image: -webkit-gradient(linear, right top, left bottom, 
                   from(yellow), 
                   color-stop(25%, yellow), 
                   color-stop(25%, red), 
                   color-stop(50%, blue),
                   color-stop(50%, yellow), 
                   color-stop(75%, blue),
                   color-stop(75%, red), 
                   to(red));
-webkit-background-size: 20px;
}

#canvas:hover {
font-size: 24px;
width:  800px;
height: 500px;
position: absolute; top: 0px; left: 0px;

background: -webkit-gradient(
  radial, 300 30%, 160, 250 25%, 80, from(red), 
  color-stop(0.05, orange), color-stop(0.4, yellow), 
  color-stop(0.6, green), color-stop(0.8, blue),
  to(#fff)
 );
-webkit-box-shadow:  0px 0px 8px #000;
}

